<!DOCTYPE html>
<!--[if IE 8]> <html lang="zh-CN" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="zh-CN" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh-CN">
<!--<![endif]-->
  <head>
    <title>EJS -- 嵌入式 JavaScript 模板引擎 | EJS 中文文档</title>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="'E' 代表 'effective'，即【高效】。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。">
    <meta name="author" content="">
    <link rel="shortcut icon" href="https://ejs.bootcss.com/favicon.ico">
    <!-- Global CSS -->
    <link rel="stylesheet" href="static/css/bootstrap.min5.css">
    <!-- Plugins CSS -->
    <link rel="stylesheet" href="static/css/font-awesome.css">
    <link rel="stylesheet" href="static/css/prism.css">
    <!-- Theme CSS -->
    <link id="theme-style" rel="stylesheet" href="static/css/styles-2.css">
<style type="text/css">
.display {
  display: block;
  width: 380px;
  border: 1px solid #666;
  margin: -56px auto 32px auto;
  background: #fff;
  box-shadow: 8px 8px 19px -10px rgba(0,0,0,0.4);
  border-radius: 4px;
  overflow: hidden;
}

</style>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body data-spy="scroll">

    <!-- ******HEADER****** -->
    <header id="header" class="header">
      <div class="container">
        <h1 class="logo pull-left">
            <a class="scrollto" href="#promo">
                <span class="logo-title">EJS</span>
            </a>
        </h1><!--//logo-->
        <nav id="main-nav" class="main-nav navbar-right" role="navigation">
          <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button><!--//nav-toggle-->
          </div><!--//navbar-header-->
          <div class="navbar-collapse collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active nav-item sr-only"><a class="scrollto" href="#promo">首页</a></li>
              <li class="nav-item"><a class="scrollto" href="#about">关于</a></li>
              <li class="nav-item"><a class="scrollto" href="#features">特性</a></li>
              <li class="nav-item"><a class="scrollto" href="#install">入门</a></li>
              <li class="nav-item"><a class="scrollto" href="#docs">文档</a></li>
              <li class="nav-item"><a class="scrollto" href="#support">支持</a></li>
              <li class="nav-item"><a class="scrollto" href="#license">许可证</a></li>
              <li class="nav-item"><a href="javascript:;">GitHub</a></li>
            </ul><!--//navbar-nav-->
          </div><!--//navabr-collapse-->
        </nav><!--//main-nav-->
      </div><!--//container-->
    </header><!--//header-->

    <!-- ******PROMO****** -->
    <section id="promo" class="promo section offset-header">
      <div class="container text-center">
        <img class="hide" src="static/picture/ejs-logo.png" alt=" EJS logo">
        <h2 class="title">
          <span class="highlight">
            <span style="font-size: 60%;">&lt;%=</span>
            EJS
            <span style="font-size: 60%;">%&gt;</span>
          </span>
        </h2>
        <p class="intro">高效的嵌入式 JavaScript 模板引擎。</p>
        <div class="btns">
          <a class="btn btn-cta-secondary scrollto" href="#install">入门</a>
        </div>
        <ul class="meta list-inline">
          <li>&nbsp;</li>
        </ul><!--//meta-->
      </div><!--//container-->
      <div class="social-media">
        <div class="social-media-inner container text-center">
          <ul class="list-inline"></ul>
        </div>
      </div>
    </section><!--//promo-->

    <!-- ******ABOUT****** -->
    <section id="about" class="about section">
      <div class="container">
        <h2 class="title text-center">EJS 是什么？</h2>
        <p class="intro text-center">“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。</p>
        <div class="row">
          <div class="item col-md-4 col-sm-6 col-xs-12">
            <div class="icon-holder">
              <i class="fa fa-heart"></i>
            </div>
            <div class="content">
              <h3 class="sub-title">纯 JavaScript</h3>
              <p>我们热爱 JavaScript，他是一门友好的编程语言。所有模板语言都要成长为图灵完备的语言，也就是说要增加一个中间层。何必呢，直接用 JS 吧！</p>
            </div><!--//content-->
          </div><!--//item-->
          <div class="item col-md-4 col-sm-6 col-xs-12">
            <div class="icon-holder">
              <i class="fa fa-clock-o"></i>
            </div>
            <div class="content">
              <h3 class="sub-title">快速开发</h3>
              <p>无需浪费时间钻研那些所谓“优雅”的神秘语法，也不用研究数据究竟如何能够被正确处理。</p>
            </div><!--//content-->
          </div><!--//item-->
          <div class="item col-md-4 col-sm-6 col-xs-12">
            <div class="icon-holder">
              <i class="fa fa-code"></i>
            </div>
            <div class="content">
              <h3 class="sub-title">语法简单</h3>
              <p>EJS 支持直接在标签内书写简单、直白的 JavaScript 代码。只需让 JavaScript 输出你所需要的 HTML ，完成工作很轻松！</p>
            </div><!--//content-->
          </div><!--//item-->
          <div class="clearfix visible-md-block visible-lg-block"></div>
          <div class="item col-md-4 col-sm-6 col-xs-12">
            <div class="icon-holder">
              <i class="fa fa-fighter-jet"></i>
            </div>
            <div class="content">
              <h3 class="sub-title">执行迅速</h3>
              <p>我们都知道 V8 以及类似 JavaScript 引擎的速度有多快。EJS 能够缓存 JS 函数的中间代码，从而提升执行速度。</p>
            </div><!--//content-->
          </div><!--//item-->
          <div class="item col-md-4 col-sm-6 col-xs-12">
            <div class="icon-holder">
              <i class="fa fa-thumbs-up"></i>
            </div>
            <div class="content">
              <h3 class="sub-title">易于调试</h3>
              <p>调试 EJS 错误（error）很容易：所有错误都是普通的 JavaScript 异常，并且还能输出异常发生的位置。</p>
            </div><!--//content-->
          </div><!--//item-->
          <div class="item col-md-4 col-sm-6 col-xs-12">
            <div class="icon-holder">
              <i class="fa fa-flask"></i>
            </div>
            <div class="content">
              <h3 class="sub-title">社区活跃</h3>
              <p>EJS 背后是一个活跃用户组成的大规模社区，能够为 EJS 的演进提供大力支持。我们同时很高兴回答你的问题或提供帮助。</p>
            </div><!--//content-->
          </div><!--//item-->
        </div><!--//row-->
      </div><!--//container-->
    </section><!--//about-->

    <!-- ******FEATURES****** -->
    <section id="features" class="features section">
      <div class="container text-center">
        <h2 class="title">特性</h2>
        <ul class="feature-list list-unstyled">

          <li><i class="fa fa-check"></i>快速编译与绘制输出</li>
          <li><i class="fa fa-check"></i>简洁的模板标签：&lt;% %&gt;</li>
          <li><i class="fa fa-check"></i>自定义分割符（例如：用 &lt;? ?&gt; 替换 &lt;% %&gt;）</li>
          <li><i class="fa fa-check"></i>引入模板片段</li>
          <li><i class="fa fa-check"></i>同时支持服务器端和浏览器 JS 环境</li>
          <li><i class="fa fa-check"></i>JavaScript 中间结果静态缓存</li>
          <li><i class="fa fa-check"></i>模板静态缓存</li>
          <li><i class="fa fa-check"></i>兼容 <a href="javascript:;">Express</a> 视图系统</li>

        </ul>
      </div><!--//container-->
    </section><!--//features-->
    <section id="install" class="install section">
      <div class="container">
        <div class="install-inner">
          <h2 class="title text-center">入门</h2>
          <div class="block">
            <h3 class="sub-title text-center">安装</h3>
            <p>利用 NPM 安装 EJS 很简单。</p>

            <div class="code-block">
              <!--//Use Prismjs - http://prismjs.com/index.html#basic-usage -->
              <pre><code class="language-bash">$ npm install ejs</code></pre>
            </div>
            <!--//code-block-->

            <h3 class="sub-title text-center">用法</h3>
            <p>将模板字符串和一些数据作为参数传递给 EJS，Duang，HTML 出来了。</p>

            <div class="code-block">
              <!--//Use Prismjs - http://prismjs.com/index.html#basic-usage -->
              <pre><code class="language-javascript">let ejs = require('ejs'),
    people = ['geddy', 'neil', 'alex'],
    html = ejs.render('&lt;%= people.join(", "); %&gt;', {people: people});</code></pre>
            </div>
            <!--//code-block-->

            <h3 class="sub-title text-center">浏览器支持</h3>
            <p>从这里下载 <a href="javascript:;">最新的浏览器版本</a>，然后引入页面即可。</p>

            <div class="code-block">
              <!--//Use Prismjs - http://prismjs.com/index.html#basic-usage -->
              <pre><code class="language-markup">&lt;script src="ejs.js"&gt;&lt;/script&gt;
&lt;script&gt;
  let people = ['geddy', 'neil', 'alex'],
      html = ejs.render('&lt;%= people.join(", "); %&gt;', {people: people});
&lt;/script&gt;</code></pre>
            </div>
            <!--//code-block-->

          </div><!--//block-->
        </div><!--//install-inner-->
      </div><!--//container-->
    </section><!--//install-->

    <!-- ******DOCS****** -->
    <section id="docs" class="docs section">
      <div class="container">
        <div class="docs-inner">
          <h2 class="title text-center">文档</h2>
          <div class="block">
            <h3 class="sub-title text-center">实例</h3>

            <div class="code-block">
              <!--//Use Prismjs - http://prismjs.com/index.html#basic-usage -->
              <pre><code class="language-markup">&lt;% if (user) { %&gt;
  &lt;h2&gt;&lt;%= user.name %&gt;&lt;/h2&gt;
&lt;% } %&gt;</code></pre>
            </div>
            <!--//code-block-->

          </div><!--//block-->
          <div class="block">
            <h3 class="sub-title text-center">用法</h3>

            <div class="code-block">
              <!--//Use Prismjs - http://prismjs.com/index.html#basic-usage -->
              <pre><code class="language-javascript">let template = ejs.compile(str, options);
template(data);
// => 输出渲染后的 HTML 字符串

ejs.render(str, data, options);
// => 输出渲染后的 HTML 字符串

ejs.renderFile(filename, data, options, function(err, str){
    // str => 输出渲染后的 HTML 字符串
});</code></pre>
            </div>
            <!--//code-block-->
          </div><!--//block-->
          <div class="block">
            <h3 class="sub-title text-center">参数</h3>
            <ul>
              <li><code>cache</code> 缓存编译后的函数，需要指定 <code>filename</code></li>
              <li><code>filename</code> 被 <code>cache</code> 参数用做键值，同时也用于 include 语句</li>
              <li><code>context</code> 函数执行时的上下文环境</li>
              <li><code>compileDebug</code> 当值为 <code>false</code> 时不编译调试语句</li>
              <li><code>client</code> 返回独立的编译后的函数</li>
              <li><code>delimiter</code> 放在角括号中的字符，用于标记标签的开与闭</li>
              <li><code>debug</code> 将生成的函数体输出</li>
              <li><code>_with</code> 是否使用 <code>with() {}</code> 结构。如果值为 <code>false</code>，所有局部数据将存储在 <code>locals</code> 对象上。</li>
              <li><code>localsName</code> 如果不使用 <code>with</code> ，localsName 将作为存储局部变量的对象的名称。默认名称是 <code>locals</code></li>
              <li><code>rmWhitespace</code> 删除所有可安全删除的空白字符，包括开始与结尾处的空格。对于所有标签来说，它提供了一个更安全版本的 <code>-%&gt;</code> 标签（在一行的中间并不会剔除标签后面的换行符)。</li>
              <li><code>escape</code> 为 <code>&lt;%=</code> 结构设置对应的转义（escape）函数。它被用于输出结果以及在生成的客户端函数中通过 <code>.toString()</code> 输出。(默认转义 XML)。</li>
              <li><code>outputFunctionName</code> 设置为代表函数名的字符串（例如 <code>'echo'</code> 或 <code>'print'</code>）时，将输出脚本标签之间应该输出的内容。</li>
              <li><code>async</code> 当值为 <code>true</code> 时，EJS 将使用异步函数进行渲染。（依赖于 JS 运行环境对 async/await 是否支持）</li>
            </ul>
          </div><!--//block-->
          <div class="block">
            <h3 class="sub-title text-center">标签含义</h3>
            <ul>
              <li><code>&lt;%</code> '脚本' 标签，用于流程控制，无输出。</li>
              <li><code>&lt;%_</code> 删除其前面的空格符</li>
              <li><code>&lt;%=</code> 输出数据到模板（输出是转义 HTML 标签）</li>
              <li><code>&lt;%-</code> 输出非转义的数据到模板</li>
              <li><code>&lt;%#</code> 注释标签，不执行、不输出内容</li>
              <li><code>&lt;%%</code> 输出字符串 '&lt;%'</li>
              <li><code>%&gt;</code> 一般结束标签</li>
              <li><code>-%&gt;</code> 删除紧随其后的换行符</li>
              <li><code>_%&gt;</code> 将结束标签后面的空格符删除</li>
            </ul>
          </div><!--//block-->
          <div class="block">
            <h3 class="sub-title text-center">包含（include）</h3>
            <p>通过 <code>include</code> 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 两个模板文件，你可以通过 <code>&lt;%- include('user/show'); %&gt;</code> 代码包含后者。</p>
            <p>你可能需要能够输出原始内容的标签 (<code>&lt;%-</code>) 用于 include 指令，避免对输出的 HTML 代码做转义处理。</p>

            <div class="code-block">
              <!--//Use Prismjs - http://prismjs.com/index.html#basic-usage -->
              <pre><code class="language-markup">&lt;ul&gt;
  &lt;% users.forEach(function(user){ %&gt;
    &lt;%- include('user/show', {user: user}); %&gt;
  &lt;% }); %&gt;
&lt;/ul&gt;</code></pre>
            </div>
            <!--//code-block-->
          </div><!--//block-->
          <div class="block">
            <h3 class="sub-title text-center">自定义分隔符</h3>
            <p>可针对单个模板或全局使用自定义分隔符：</p>

            <div class="code-block">
              <!--//Use Prismjs - http://prismjs.com/index.html#basic-usage -->
              <pre><code class="language-javascript">let ejs = require('ejs'),
    users = ['geddy', 'neil', 'alex'];

// 单个模板文件
ejs.render('&lt;?= users.join(" | "); ?&gt;', {users: users},
    {delimiter: '?'});
// => 'geddy | neil | alex'

// 全局
ejs.delimiter = '$';
ejs.render('&lt;$= users.join(" | "); $&gt;', {users: users});
// => 'geddy | neil | alex'</code></pre>
            </div>
            <!--//code-block-->
          </div><!--//block-->

          <div class="block">
            <h3 class="sub-title text-center">缓存</h3>
<p>EJS 附带了一个基本的进程内缓存，用于缓在渲染模板过程中所生成的临时 JavaScript 函数。
通过 Node 的 `lru-cache` 库可以很容易地加入 LRU 缓存：</p>

<div class="code-block">
              <!--//Use Prismjs - http://prismjs.com/index.html#basic-usage -->
              <pre><code class="language-javascript">let ejs = require('ejs'),
    LRU = require('lru-cache');
ejs.cache = LRU(100); // 具有 100 条内容限制的 LRU 缓存</code></pre>

<p>如果要清除 EJS 缓存，调用 <code>ejs.clearCache</code> 即可。如果你正在使用的是
LRU 缓存并且需要设置不同的限额，则只需要将 `ejs.cache` 重置为
一个新的 LRU 实例即可。</p>
          </div><!--//block-->

          <div class="block">
            <h3 class="sub-title text-center">自定义文件加载器</h3>
<p>默认的文件加载器是 <code>fs.readFileSync</code>，如果你想要的自定义它, 
设置<code>ejs.fileLoader</code> 即可。</p>

<div class="code-block">
              <!--//Use Prismjs - http://prismjs.com/index.html#basic-usage -->
              <pre><code class="language-javascript">let ejs = require('ejs');
let myFileLoader = function (filePath) {
  return 'myFileLoader: ' + fs.readFileSync(filePath);
};

ejs.fileLoader = myFileLoad;</code></pre>

<p>使用此功能，您可以在读取模板之前对其进行预处理。</p>
          </div><!--//block-->

          <div class="block">
            <h3 class="sub-title text-center">布局（Layouts）</h3>

<p>EJS 并未对块（blocks）提供专门的支持，但是可以通过
包含页眉和页脚来实现布局，如下所示：</p>

<div class="code-block">
              <!--//Use Prismjs - http://prismjs.com/index.html#basic-usage -->
              <pre><code class="language-javascript">&lt;%- include('header'); -%&gt;
&lt;h1&gt;
  Title
&lt;/h1&gt;
&lt;p&gt;
  My page
&lt;/p&gt;
&lt;%- include('footer'); -%&gt;</code></pre>
          </div><!--//block-->

          <div class="block">
            <h3 class="sub-title text-center">客户端支持</h3>

<p>从<a href="javascript:;">latest release</a> 链接下载
<code>./ejs.js</code> 或 <code>./ejs.min.js</code> 文件。或者，你可以 clone 这个仓库并
通过执行 <code>jake build</code> 自己编译（或者执行 <code>$(npm bin)/jake build</code>，如果 jake 
不是安装在全局环境的话）。</p>

<p>在页面中包含上面的任意一个文件，然后 <code>ejs</code> 就全局可用了</p>

<h4>示例</h4>

<div class="code-block">
              <!--//Use Prismjs - http://prismjs.com/index.html#basic-usage -->
              <pre><code class="language-javascript">&lt;div id="output"&gt;&lt;/div&gt;
&lt;script src="ejs.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
  let people = ['geddy', 'neil', 'alex'],
      html = ejs.render('&lt;%= people.join(", "); %&gt;', {people: people});
  // With jQuery:
  $('#output').html(html);
  // Vanilla JS:
  document.getElementById('output').innerHTML = html;
&lt;/script&gt;</code></pre>

<h4>注意事项</h4>

<p>大多数情况下，EJS 将会按照我们的预期运行; 但是, 仍然需要注意：</p>

<ol>
  <li>显然, 如果你没有文件系统的访问权限, `ejs.renderFile` 将无法正常工作。</li>
  <li>相同的原因, 除非为 include 设置一个回调函数，否则 include 无法正常工作。如下所示：</li>
</ol>

              <pre><code class="language-javascript">let str = "Hello <%= include('file', {person: 'John'}); %>",
      fn = ejs.compile(str, {client: true});

fn(data, null, function(path, d){ // include callback
  // path -> 'file'
  // d -> {person: 'John'}
  // Put your code here
  // Return the contents of file as a string
}); // returns rendered string</code></pre>
          </div><!--//block-->

          <div class="block">
            <h3 class="sub-title text-center">在 Express 中使用 EJS</h3>
            <p><a href="javascript:;">此 GitHub Wiki 页面</a> 介绍了几种向 Express 传递 EJS 参数的方式。</p>
          </div><!--//block-->

        </div><!--//docs-inner-->
      </div><!--//container-->
    </div></div></div></div></section><!--//features-->

    <!-- ******SUPPORT****** -->
    <section id="support" class="support section">
      <div class="container">
        <div class="support-inner">
          <h2 class="title text-center">支持</h2>
          <div class="block">
            <h3 class="sub-title text-center"><a href="javascript:;">Stack Overflow</a></h3>
            <p><a href="javascript:;">Ask questions</a> about specific problems you have faced, including details about what exactly you are trying to do. Make sure you tag your question with <code>ejs</code>. You can also read through <a href="javascript:;">existing ejs questions</a>.</p>
          </div><!--//block-->
          <div class="block">
            <h3 class="sub-title text-center"><a href="javascript:;">GitHub issues</a></h3>
            <p>The <a href="javascript:;">issue tracker</a> is the preferred channel for bug reports, features requests and submitting pull requests.</p>
          </div><!--//block-->
        </div><!--//support-inner-->
      </div><!--//container-->
    </section><!--//support-->

    <!-- ******LICENSE****** -->
    <section id="license" class="license section">
      <div class="container">
        <div class="license-inner">
          <h2 class="title text-center">许可证</h2>
          <p>EJS is licensed under the Apache License, version 2.0. Information can found here: <a href="javascript:;">http://www.apache.org/licenses/</a>.</p>
        </div><!--//license-inner-->
      </div><!--//container-->
    </section><!--//license-->

    <!-- ******FOOTER****** -->
    <footer class="footer">
      <div class="container text-center">
        <small class="copyright">EJS &copy; 2112 <a href="javascript:;">Matthew Eernisse</a> ::: Template designed with <i class="fa fa-heart"></i> by <a href="javascript:;" target="_blank">Xiaoying Riley</a></small>
      </div><!--//container-->
    </footer><!--//footer-->

    <!-- Javascript -->
    <script src="static/js/jquery-1.11.1.min.js"></script>
    <script src="static/js/jquery-migrate-1.2.1.min.js"></script>
    <script src="static/js/jquery.easing.1.3.js"></script>
    <script src="static/js/bootstrap.min4.js"></script>
    <script src="static/js/jquery.scrollTo.min.js"></script>
    <script src="static/js/prism.js"></script>
    <script src="static/js/main.js"></script>
  </body>
</html>
